<template>
  <div>
    <div id="waypoint" class="m-padding-tb-massive">
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"
      />
      <div class="ui container m-container">
        <!-- 头部 -->
        <div class="ui attached segment padded">
          <div class="m-padding-lr">
            <h1 id="noteTitle" class="typo-h1">{{ blog[0].title }}</h1>
            <div class="ui horizontal item link list m-margin-tb-mini">
              <!-- horizontal代表横着放置 -->
              <div class="item">
                <img
                  :src="'http://localhost:8081/blog' + blog[0].uimg"
                  class="ui avatar image"
                />
                <div id="author" class="content">
                  <a :href="'#/userDetail?id=' + blog[0].uid"
                    ><font>{{ blog[0].nickname }}</font></a
                  >
                </div>
              </div>
              <div class="item">
                <i class="calendar icon m-icon"></i
                ><span id="createTime">{{
                  blog[0].create_time.split("T")[0]
                }}</span>
              </div>
              <div class="item right basic">
                <div class="ui orange basic label">{{ blog[0].type }}</div>
              </div>
              <div class="item right basic">
                <div class="ui teal basic label m-fontsize-medium">
                  {{ blog[0].type_name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="ui attached segment padded">
          <!-- 文本内容 -->
          <div
            id="content"
            class="
              js-toc-content
              typo typo-selection
              m-padding-responsive m-black
            "
          >
            <h2 id="tagline" class="serif">
              {{ blog[0].content }}
            </h2>
            <!-- 标签 -->
            <div id="tagName" class="m-padding-lr">
              <div class="ui teal basic left pointing label m-margin-tb-tiny">
                {{ blog[0].tags.split(",")[0] }}
              </div>
              <div
                class="ui teal basic left pointing label m-margin-tb-tiny"
                v-if="tags[1]"
              >
                {{ blog[0].tags.split(",")[1] }}
              </div>
            </div>
            <!-- 赞赏 -->
            <div class="ui center aligned basic segment" @click="postScore">
              <el-rate
                v-model="value"
                show-score
                :allow-half="true"
                text-color="#ff9900"
                score-template="{value}"
              >
                >
              </el-rate>
            </div>
            <i
              class="heartbeat icon"
              v-if="collectArray.indexOf(blog[0].id) >= 0"
              @click="postCollect"
            ></i>
            <i class="heart outline icon" v-else @click="postCollect"></i>
          </div>
        </div>
        <!-- 评论区 -->
        <div class="ui bottom attached segment">
          <!-- 留言区 -->
          <div id="comment-container" class="ui segment teal m-margin-lr">
            <div>
              <div
                class="ui m-fontsize-medium comments"
                style="max-width: 100%"
              >
                <h3 class="ui dividing header">评论</h3>
                <div class="comment">
                  <div
                    id="userComment"
                    class="content"
                    v-for="comment in commentArray"
                    :key="comment.id"
                  >
                    <a class="author">
                      <img
                        :src="'http://localhost:8081/blog' + comment.img"
                        width="30px"
                        height="30px"
                      />
                      <span>{{ comment.nickname }}</span>
                      <div
                        class="ui mini basic orange label m-padding-mini"
                        v-if="comment.uid == author"
                      >
                        博主
                      </div>
                    </a>
                    <div class="metadata">
                      <span class="date">{{
                        comment.create_time.split("T")[0]
                      }}</span>
                    </div>
                    <div class="text">
                      {{ comment.content }}&nbsp;&nbsp;<i
                        v-if="comment.up > 0"
                        class="thumbs up icon"
                        @click="postUp(comment.id, comment.up)"
                      ></i
                      ><i
                        v-else
                        class="thumbs up outline icon"
                        @click="postUp(comment.id, comment.up)"
                      ></i
                      >{{ comment.up }}
                    </div>
                    <div class="actions">
                      <a
                        class="reply"
                        data-commentid="1"
                        data-commentnickname="Matt"
                        @click="getNickName(comment.nickname, comment.id)"
                        >回复</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="comment-form" class="ui form m-margin-lr m-fontsize-medium">
            <input type="hidden" name="noteID" />
            <input type="hidden" name="CommentID" value="-1" />
            <div class="field">
              <textarea
                id="commentMessage"
                name="content"
                placeholder="请输入评论信息..."
                v-model="content"
              ></textarea>
            </div>
            <div class="fields">
              <div class="field m-mobile-wide">
                <button
                  id="comment-post-btn"
                  type="button"
                  class="ui teal button m-mobile-wide"
                  @click="postComments"
                >
                  <i class="edit icon"></i>发布
                </button>
                <a href="#/home">
                  <button type="button" class="ui teal button m-mobile-wide">
                    <i class="edit icon"></i
                    ><font style="color: white">返回</font>
                  </button>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      id="toolbar"
      class="m-padding m-fixed m-right-bottom"
      style="display: none"
    >
      <div class="ui vertical icon buttons">
        <button type="button" class="ui teal toc button">目录</button>
        <a href="#comment-container" type="button" class="ui teal button"
          >评论</a
        >
        <div id="toTop-button" class="ui icon button">
          <i class="chevron up icon"></i>
        </div>
      </div>
    </div>

    <div class="ui toc-container flowing popup center transition hidden">
      <div class="js-toc"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 3.7,
      commentArray: [],
      blog: {},
      tags: [],
      author: [],
      content: "",
      pid: 0,
      flag: true,
      collectArray: [],
    };
  },
  created() {
    this.getBlogDetail();
    this.getComment();
    this.getCollect();
  },
  methods: {
    getComment() {
      this.$get("comment/" + this.$route.query.id + "/0/100").then((res) => {
        if (res.code == 200) {
          this.commentArray = res.data.comment;
        }
      });
    },
    getBlogDetail() {
      this.$get("detail/" + this.$route.query.id).then((res) => {
        if (res) {
          this.blog = res;
          this.tags = res[0].tags.split(",");
          this.value = res[0].score / 2;
          this.author = res[0].uid;
        }
      });
    },
    getCollect() {
      this.$get(
        "collect/" + JSON.parse(sessionStorage.getItem("user")).id + "/0/100"
      ).then((res) => {
        if (res.code == 200) {
          for (var i = 0; i < res.data.blog.length; i++) {
            this.collectArray[i] = res.data.blog[i].id;
          }
        }
      });
    },
    postUp(id, up) {
      let token = sessionStorage.getItem("tokenStr");
      if (token === null || token === "") {
        this.$message.warning("请先登录");
        return;
      }
      let param = { id: id, up: up + 1 };
      this.$put("comment", param).then((res) => {
        this.getComment();
      });
    },
    postCollect() {
      let token = sessionStorage.getItem("tokenStr");
      if (token === null || token === "") {
        this.$message.warning("请先登录");
        return;
      }
      let param = {
        blogId: this.$route.query.id,
        userId: JSON.parse(sessionStorage.getItem("user")).id,
      };
      if (this.flag) {
        this.$post("collect", param).then((res) => {
          if (res.code == 200) {
            this.flag = false;
          }
        });
      } else {
        this.$delete(
          "collect/" +
            this.$route.query.id +
            "/" +
            JSON.parse(sessionStorage.getItem("user")).id
        ).then((res) => {
          if (res.code == 200) {
            this.flag = true;
          }
        });
      }
    },
    getNickName(val, id) {
      this.content = "@" + val + "   ";
      this.pid = id;
    },
    postComments() {
      let token = sessionStorage.getItem("tokenStr");
      if (token === null || token === "") {
        this.$message.warning("请先登录");
        return;
      }
      if (this.content == null || this.content == "") {
        this.$message.warning("评论内容不能为空");
        return;
      }
      let param = {
        blogId: this.$route.query.id,
        userId: JSON.parse(sessionStorage.getItem("user")).id,
        content: this.content,
        parentCommentId: this.pid,
      };
      this.$post("/comment", param).then((res) => {
        if (res) {
          this.getComment();
        }
      });
    },
    postScore() {
      let token = sessionStorage.getItem("tokenStr");
      if (token === null || token === "") {
        this.$message.warning("请先登录");
        return;
      }
      let param = {
        blogId: this.$route.query.id,
        userId: JSON.parse(sessionStorage.getItem("user")).id,
        score: this.value * 2,
      };
      this.$post("score", param).then((res) => {
        if (res) {
          this.getBlogDetail();
        }
      });
    },
  },
};
</script>

<style>
</style>